<template>
	<NavBar :obj="{ title: title, backgroundColor: 'transparent', color: '#fff', dark: true }" :scrollTop="scrollTop" />
	<image :src="theme?.bg.share" mode="widthFix" class="img-top" :style="{ top: topH + 'px' }"></image>

	<view class="fill flex items-center justify-center flex-col" :style="{ 'margin-top': 'calc(580rpx - ' + topH + 'px)' }">
		<view class="title">邀请码</view>
		<view class="code">{{ info.code }}</view>
		<view class="qrcode flex items-center justify-center">
			<image :src="imgUrl + info.picture" v-if="source == 'mp-weixin'"></image>

			<up-qrcode :val="productionUrl + '?parent_code=' + info.code" :size="190" v-else></up-qrcode>
		</view>
		<view class="tips" v-if="source == 'h5'">可截屏保存分享页</view>
		<view class="btn-container flex items-center justify-center">
			<view class="btn" @click="copy(1)">复制邀请码</view>
			<view class="btn" @click="copy(2)" v-if="source == 'h5'">复制链接</view>
			<view class="btn" @click="saveImage" v-else>保存小程序码</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, inject } from 'vue';
	import { port, imgUrl, goBack, hint, productionUrl, loading, closeLoading } from '../../service/port';
	import { onLoad, onShow, onPageScroll } from '@dcloudio/uni-app';
	import { useThemeStore } from '@/stores/theme';
	const theme = useThemeStore();
	
	const info = ref({});

	const id = ref('');
	const source = ref('h5');
	const topH = ref(0);

	const scrollTop = ref(0);
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	});

	const title = ref('');
	onLoad((e) => {
		title.value = e.title;
	});

	onShow(() => {
		// #ifdef MP-WEIXIN
		source.value = 'mp-weixin';
		const menuInfo = inject('menuButtonInfo');
		topH.value = menuInfo.top - 2;
		// #endif
		getInfo();
	});

	function copy(type) {
		let data = type == 1 ? info.value.code : productionUrl + '?parent_code=' + info.value.code;

		uni.setClipboardData({
			data: data,
			success: function () {
				hint('已复制');
			}
		});
	}

	const saveImage = async () => {
		try {
			loading();
			// 1. 下载图片到临时路径
			const downloadResult = await uni.downloadFile({
				url: imgUrl + info.value.picture
			});

			// 检查下载结果
			if (downloadResult.statusCode !== 200 || !downloadResult.tempFilePath) {
				throw new Error('图片下载失败');
			}

			// 2. 保存到相册
			const saveResult = await uni.saveImageToPhotosAlbum({
				filePath: downloadResult.tempFilePath
			});
			closeLoading();
			uni.showToast({
				title: '保存成功'
			});
		} catch (error) {
			uni.showToast({
				title: '保存失败'
			});
		}
	};

	async function getInfo() {
		const resProfile = await port('getUserIndex');
		// #ifdef MP-WEIXIN
		const resPicture = await port('getInvitationCode', { source: source.value });
		info.value.picture = resPicture.data;
		// #endif
		info.value.code = resProfile.data.code;
	}
</script>
<style scoped lang="scss">
	::v-deep page {
		background-color: #f81a2e;
	}

	.img-top {
		width: 100%;
		height: 350rpx;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 0;
	}
	.img-top-2 {
		margin: 0 30rpx;
		width: calc(100% - 60rpx);
		height: 350rpx;
		position: absolute;
		top: 644rpx;
		left: 0;
		z-index: 1;
	}

	.fill {
		position: relative;
		z-index: 2;
		margin-top: 580rpx;
		background: #fffcf7;
		border-radius: 18rpx;
		margin: 0 30rpx;
		padding: 30rpx 0;
		.title {
			font-weight: 400;
			font-size: 26rpx;
			color: #666666;
		}

		.code {
			font-weight: 500;
			font-size: 54rpx;
			color: #fb3204;
			padding: 15rpx 0 25rpx 0;
		}

		.qrcode {
			background-color: #fff;
			width: 354rpx;
			height: 354rpx;
			> image {
				width: 344rpx;
				height: 344rpx;
			}
		}

		.tips {
			color: #b6b6b6;
			font-size: 24rpx;
			margin-top: 8rpx;
		}

		.btn-container {
			width: calc(100% - 70rpx);
			// #ifdef MP-WEIXIN
			margin-top: 80rpx;
			// #endif

			// #ifdef H5
			margin-top: 40rpx;
			// #endif

			gap: 25rpx;
			.btn {
				background: $theme-bg-btn-color;
				border-radius: 42rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #fffefe;
				padding: 15rpx;
				text-align: center;
				width: 30%;
			}
		}
	}
</style>
